<template>
    <div class="content">
        <Form :label-width="140" :model="form" ref="form" :rules="rules">
            <FormItem label="资讯标题" prop="title">
                <Input
                    v-model="form.title"
                    :maxlength="50"
                    placeholder="请输入资讯标题"
                ></Input>
            </FormItem>
            <FormItem label="发布人" prop="publisher">
                <Input
                    v-model="form.publisher"
                    :maxlength="50"
                    placeholder="请输入发布人"
                ></Input>
            </FormItem>
            <FormItem label="发布时间" prop="publishTime">
                <DatePicker
                    :value="form.publishTime"
                    @on-change="dateChange"
                    type="datetime"
                    placeholder="请选择发布时间"
                ></DatePicker>
            </FormItem>
            <FormItem label="状态" prop="status">
                <Select
                    style="width: 100%;"
                    placeholder="状态"
                    v-model="form.status"
                >
                    <Option :value="1">有效</Option>
                    <Option :value="0">失效</Option>
                </Select>
            </FormItem>
            <FormItem label="推荐权重" prop="sort">
                <Input
                    placeholder="数值越大，推荐排序越靠前"
                    v-model="form.sort"
                    :maxlength="11"
                ></Input>
            </FormItem>
            <FormItem label="资讯正文" prop="content">
                <Eitor v-model="form.content"></Eitor>
            </FormItem>
            <FormItem>
                <div class="submit-footer">
                    <Button type="primary" @click="submit">保存</Button>
                    <Button @click="handleCancel">取消</Button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { addPolicy, updatePolicy, queryPolicyInfo } from '@/api/policy'
import Eitor from '@/components/editor'
export default {
    components: {
        Eitor
    },
    inject: ['nextPageReload'],
    data () {
        return {
            form: {
                content: '',
                policyId: '',
                publishTime: '',
                publisher: '',
                remark: '',
                title: '',
                sort: '',
                status: ''
            },
            rules: Object.freeze({
                title: [
                    {
                        required: true,
                        message: '请输入资讯标题',
                        trigger: 'blur'
                    }
                ],
                publisher: [
                    { required: true, message: '请输入发布人', trigger: 'blur' }
                ],
                publishTime: [
                    {
                        required: true,
                        message: '请选择发布时间',
                        trigger: 'change'
                    }
                ],
                status: [
                    {
                        required: true,
                        type: 'number',
                        message: '请选择状态',
                        trigger: 'change'
                    }
                ],
                sort: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            let err = value ? '' : '请输入推荐权重'
                            if (value && !/^\d{1,11}$/.test(value)) {
                                err = '请输入数字,最大11位'
                            }
                            err ? callback(new Error(err)) : callback()
                        },
                        trigger: 'blur'
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请输入资讯正文',
                        trigger: 'blur'
                    }
                ]
            })
        }
    },
    mounted () {
        const id = this.$route.params.id
        if (id) {
            this.queryInfo(id)
        }
    },
    methods: {
        ...mapMutations(['removeTagNav']),
        dateChange (v) {
            this.form.publishTime = v
        },
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    const isValid = this.form.status === 1
                    const fn = this.form.policyId ? updatePolicy : addPolicy
                    fn({
                        ...this.form,
                        isValid
                    }).then(res => {
                        if (res.data.code === '0000') {
                            this.$Message.success(`保存成功`)
                            this.nextPageReload()
                            this.handleCancel()
                        } else {
                            this.$Message.error(res.data.msg)
                        }
                    })
                }
            })
        },
        handleCancel () {
            this.removeTagNav(this.$route)
            this.$router.replace({
                name: 'policyManageList'
            })
        },
        setFormByInfo (data) {
            if (!data) return
            Object.keys(this.form).forEach(k => {
                if (data.hasOwnProperty(k)) {
                    this.form[k] = data[k]
                }
            })
            if (typeof data.isValid === 'boolean') {
                this.form.status = data.isValid ? 1 : 0
            } else {
                this.form.status = ''
            }
        },
        queryInfo (id) {
            queryPolicyInfo(id).then(res => {
                if (res.data.code === '0000') {
                    this.setFormByInfo(res.data.data)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-form {
    max-width: 800px;
}
</style>
